<template>
  <div class="profile">
    <h1>我的</h1>
    <div class="content">
      <div class="user-info">
        <div class="avatar">
          <img
            src="https://via.placeholder.com/120x120/3498db/ffffff?text=用户"
            alt="用户头像"
          >
        </div>
        <div class="user-details">
          <h2>葫芦艺术爱好者</h2>
          <p class="user-title">传统工艺传承者</p>
          <p class="join-date">加入时间：2024年1月</p>
        </div>
      </div>

      <div class="stats">
        <h2>我的统计</h2>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">15</div>
            <div class="stat-label">收藏作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">8</div>
            <div class="stat-label">学习课程</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">3</div>
            <div class="stat-label">创作作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">25</div>
            <div class="stat-label">社区互动</div>
          </div>
        </div>
      </div>

      <div class="recent-activity">
        <h2>最近活动</h2>
        <div class="activity-list">
          <div class="activity-item">
            <div class="activity-icon">🎨</div>
            <div class="activity-content">
              <p><strong>收藏了新作品</strong></p>
              <p class="activity-time">2小时前</p>
            </div>
          </div>
          <div class="activity-item">
            <div class="activity-icon">📚</div>
            <div class="activity-content">
              <p><strong>完成了课程学习</strong></p>
              <p class="activity-time">1天前</p>
            </div>
          </div>
          <div class="activity-item">
            <div class="activity-icon">💬</div>
            <div class="activity-content">
              <p><strong>发表了评论</strong></p>
              <p class="activity-time">3天前</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 个人资料页面组件
</script>

<style lang="less" scoped>
// 定义变量
@text-dark: #2c3e50;
@text-gray: #7f8c8d;
@primary-blue: #3498db;
@card-bg: #f8f9fa;
@shadow-light: rgba(0, 0, 0, 0.1);

.profile {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;

  h1 {
    color: @text-dark;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

// 用户信息卡片
.user-info {
  background: @card-bg;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 2px 10px @shadow-light;
  display: flex;
  align-items: center;
  gap: 2rem;

  .avatar {
    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid @primary-blue;
    }
  }

  .user-details {
    h2 {
      color: @text-dark;
      margin: 0 0 0.5rem 0;
      font-size: 1.8rem;
    }

    .user-title {
      color: @primary-blue;
      font-size: 1.1rem;
      margin: 0 0 0.5rem 0;
      font-weight: 500;
    }

    .join-date {
      color: @text-gray;
      margin: 0;
      font-size: 0.9rem;
    }
  }
}

// 统计卡片
.stats {
  background: @card-bg;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 2px 10px @shadow-light;

  h2 {
    color: @text-dark;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid @primary-blue;
    padding-bottom: 0.5rem;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;

    .stat-item {
      text-align: center;
      padding: 1rem;
      background: white;
      border-radius: 10px;
      box-shadow: 0 1px 5px @shadow-light;

      .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: @primary-blue;
        margin-bottom: 0.5rem;
      }

      .stat-label {
        color: @text-gray;
        font-size: 0.9rem;
      }
    }
  }
}

// 最近活动
.recent-activity {
  background: @card-bg;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 2px 10px @shadow-light;

  h2 {
    color: @text-dark;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid @primary-blue;
    padding-bottom: 0.5rem;
  }

  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .activity-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: white;
      border-radius: 10px;
      box-shadow: 0 1px 5px @shadow-light;

      .activity-icon {
        font-size: 1.5rem;
        width: 40px;
        text-align: center;
      }

      .activity-content {
        flex: 1;

        p {
          margin: 0;
          color: @text-dark;

          &.activity-time {
            color: @text-gray;
            font-size: 0.9rem;
            margin-top: 0.25rem;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .user-info {
    flex-direction: column;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
